<template>
    <div>
        v-model的指令操作
    </div>
    <span>用户名：</span>
    <input type="text" v-model="username"> {{ username }}<br></br>
    <span>密码：</span>
    <input type="password" v-model="pwd"> {{ pwd }}<br></br>
    <span>来自城市地点：</span>
    <select v-model="from">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="杭州">杭州</option>
    </select>{{ from }} <br></br>
    <span>爱好</span> {{ hobby }}
    <input type="checkbox" v-model="hobby" value="篮球"> 篮球 <br></br>
    <input type="checkbox" v-model="hobby" value="台球"> 台球 <br></br>
    <input type="checkbox" v-model="hobby" value="逛街"> 逛街 <br></br>
    <br></br>
    <span>性别</span> {{ sex }}
    <input type="radio" v-model="sex" value="男"> 男
    <input type="radio" v-model="sex" value="女"> 女 <br></br>

    <span>个人名言：</span>
    <textarea v-model="instr"></textarea>{{ instr }}
    <!--v-model修饰符-->
    <span>输入文本：
    </span>{{ strtrim }}
    <input type="text" v-model.trim="strtrim">
    <input type="text" v-model.number="strtrim">
    <input type="text" v-model.lazy="strtrim">
</template>

<script setup>
import { ref } from 'vue';


const username = ref('叶凡123')
const pwd = ref('123456789')
const from = ref('北京')
const hobby = ref(['台球'])
const sex = ref('男')
const instr = ref('')
const strtrim = ref("  萧炎  ")
</script>

<style scoped></style>